<template>
  <div class="w-full h-[70px] relative">
    <input :type="name === 'password' ? 'password' : 'text'" placeholder="" v-model="value" />
    <span class="label"> {{ label }} </span>
    <div class="underline"></div>
    <span class="message">{{ message }}</span>
  </div>
</template>

<script setup lang="ts">
const { message, label } = defineProps<{
  message: string | undefined
  label: string | (() => string | undefined) | undefined
  name: string | undefined
}>()

const value = defineModel()
</script>

<style lang="scss" scoped>
.label {
  @apply absolute bottom-[10px] left-0 text-[16px] text-[#333] pointer-events-none duration-300;
}
input {
  @apply w-full h-full pt-[25px] text-[14px] outline-none text-[#636e72] border-b-[2px] bg-transparent border-[#c0c0c0];
}
.underline {
  @apply absolute bottom-[0px] left-[0px] w-full h-[2px] bg-[#2c6fdb] scale-x-0  duration-300;
}
.message {
  @apply text-[#c0c0c0] text-[12px] opacity-0 duration-300;
}
input:hover ~ .label,
input:not(:placeholder-shown) ~ .label {
  @apply translate-y-[-25px] text-[14px] text-[#2c6fdb] border-[#2c6fdb];
}
input:hover ~ .message,
input:not(:placeholder-shown) ~ .message {
  @apply opacity-100;
}
input:hover ~ .underline,
input:not(:placeholder-shown) ~ .underline {
  @apply scale-x-100;
}
</style>
